import * as React from 'react';
import { IconButton } from 'office-ui-fabric-react';
import { OverflowSetCustom, ParagraphCardTitle } from '..';
import { openDialog } from '../../utils/WordDialog';
import './index.less'

export interface Props {
  title?: string;
  content?: string;
  hideMenu?: any;
  menuProps?: any;
}

export default class ParagraphCard extends React.Component<Props> {
  render() {
    const {
      title,
      content,
      children,
      hideMenu,
      menuProps
    } = this.props;

    // const content = '最近几年，共享经济与绿色出行越来越受到人们的重视，特别是解决“最后一公里”的问题，公交、地铁由于其时间限制、人群拥挤在早高峰与节假日逐渐不受到人们钟爱，顺应消费者的迫切需求，新业态“共享单车”应运而生。作为城市交通的重要组成部分，共享单车为居民和旅游者提供了便捷的绿色出行方式，同时也促进了国家节能环保的发展。兴起之初发展迅速，逐渐出现管理混乱、居民诚信缺失的问题，为我国共享单车的可持续发展和政府部门道路管理带来了巨大的挑战。因此，对于新业态“共享单车”的发展路径研究不仅能够解决现存的问题，也可以丰富对新业态与共享经济的培育管理研'
    return (
      <React.Fragment>
        <div className="paragraph-card hover-card">
          <ParagraphCardTitle hideMenu={hideMenu} menuProps={menuProps} title={title}>
          </ParagraphCardTitle>
          {children ? (<div className="content">{children}</div>) :
            <div className="content text-overflow" dangerouslySetInnerHTML={{ '__html': content }} />
          }
        </div>
      </React.Fragment>
    );
  }

  // overflowSetItems = (): any[] => [
  //   {
  //     key: 'newItem',
  //     name: '预览',
  //     icon: 'View',
  //     ariaLabel: 'New. Use left and right arrow keys to navigate',
  //     onClick: () => {
  //       openDialog('https://localhost:3000/', 80, 50)
  //       return;
  //     }
  //   },
  //   {
  //     key: 'download',
  //     name: '加入',
  //     icon: 'Download',
  //     ariaLabel: 'New. Use left and right arrow keys to navigate',
  //     onClick: () => {
  //       this.insertHTML(this.props.content)
  //       return;
  //     }
  //   },
  // ]

  insertHTML = (html) => {
    Word.run(function (context) {
      const blankParagraph = context.document.body.paragraphs.getLast().insertParagraph("", "After");
      blankParagraph.insertHtml(html, "End");

      return context.sync();
    }).catch(function (error) {
      console.log('Error:' + error);
      if (error instanceof OfficeExtension.Error) {
        console.log("Debug info: " + JSON.stringify(error.debugInfo));
      }
    });
  }
}
